<template>
  <div>
	  <div style="display: inline-block;float: right;margin-bottom: 10px;">
      <el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="prev">返回上一页</el-button>
      <el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="refresh">刷新</el-button>
    </div>
	  	<el-table
        v-loading="tableDataLoading"
          :data="tableData.content">
        <el-table-column
         prop="id"
         label="编号"
         width="80">
         </el-table-column>
         <el-table-column
          prop="coverImg"
          label="商品图片">
          <template slot-scope="scope">
            <img :src="scope.row.coverImg" alt="" width="60" height="60">
          </template>
          </el-table-column>
          <el-table-column
           prop="title"
           label="商品标题"
         width="200">
           </el-table-column>
          <el-table-column
           prop="content"
           label="兑换码">
          </el-table-column>
          <el-table-column
             prop="linkUrl"
             label="兑换地址"
             width="200">
          </el-table-column>
          <el-table-column
             label="订单号"
             width="180">
          	 <template slot-scope="scope">
			  <span style="color: #4f9dec;cursor: pointer;" @click="orderDetails(scope.row.orderId)">{{scope.row.orderNum?scope.row.orderNum:'暂无'}}</span>
          	 </template>
          </el-table-column>
          <el-table-column
             label="支付金额">
          	 <template slot-scope="scope">
          	   <span>{{scope.row.payMoney?scope.row.payMoney:'暂无'}}</span>
          	 </template>
          </el-table-column>
          <el-table-column
             label="支付方式">
          	 <template slot-scope="scope">
          	   <span >{{scope.row.payWay==1 ? '微信' : scope.row.payWay==2? '支付宝' : '零钱'}}</span>
          	 </template>
          </el-table-column>
          <el-table-column
             label="用户名">
          	 <template slot-scope="scope">
          	   <span >{{scope.row.nickName ? scope.row.nickName:'暂无'}}</span>
          	 </template>
          </el-table-column>
          <el-table-column
             label="电话"
             width="150">
          	 <template slot-scope="scope">
          	   <span >{{scope.row.phone?scope.row.phone:'暂无'}}</span>
          	 </template>
          </el-table-column>
          <el-table-column
             prop="status"
             label="状态"
             fixed="right">
             <template slot-scope="scope">
               <span style="color:#3E8EF7;" v-if="scope.row.status == 1">正常</span>
               <span v-if="scope.row.status == 2">关闭</span>
               <span v-if="scope.row.status == 3">已使用</span>
             </template>
          </el-table-column>
		  <el-table-column
		   prop="expressTime"
		   label="出售时间"
		   width="160">
		   <template slot-scope="scope">
		     <span>{{scope.row.expressTime?scope.row.expressTime:'未出售'}}</span>
		   </template>
		   </el-table-column>
         <el-table-column
          prop="createTime"
          label="创建时间"
          width="160">
          </el-table-column>
          <el-table-column
            label="操作"
            width="100"
            fixed="right">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  v-if="scope.row.status!=='3'"
                  @click="compile(scope.row)">修改
                </el-button>
                <el-button
                  v-else
                  size="mini"
                  type="primary"
                  disabled>修改
                </el-button>
              </template>
          </el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 10px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 15, 20, 25]"
            :page-size="size"
            :current-page="page"
            layout="total,sizes, prev, pager, next"
            :total="tableData.totalElements">
          </el-pagination>
        </div>
       <!-- 修改兑换码 -->
        <el-dialog title="兑换码修改" :visible.sync="dialogFormVisible" center>
        	<el-form :model="form">
        	  <el-form-item label="兑换地址：" :label-width="formLabelWidth" >
        	    <el-input v-model="form.linkUrl" style="width:65%;" placeholder="请输入兑换地址"></el-input>
        	  </el-form-item>
            <el-form-item label="兑换码：" :label-width="formLabelWidth" >
              <el-input v-model="form.content" style="width:65%;" placeholder="请输入兑换码"></el-input>
            </el-form-item>
            <el-form-item label="状态：" :label-width="formLabelWidth" >
              <el-radio-group v-model="form.status">
                  <el-radio label="1">正常</el-radio>
                  <el-radio label="2">关闭</el-radio>
                  <!-- <el-radio :label="3">已使用</el-radio> -->
              </el-radio-group>
            </el-form-item>
        	</el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="compileNoticeTo()">确 定</el-button>
          </div>
        </el-dialog>
  </div>
</template>

<script>
	export default {
        data() {
          return {
          size:10,
          page:1,
          title:'',
          linkUrl:'',
          content:'',
          goodsId:'',
          coverImg:'',
          content:'',
          type:'',
          status:0,
          form:{
            id:'',
            goodsId:'',
            title:'',
            linkUrl:'',
            content:'',
            coverImg:'',
            status:'',
            createTime:'',
          },
          formLabelWidth:'200px',
          tableDataLoading:false,
          dialogFormVisible:false,
          tableData:[],
        }
      },
      methods: {
		// 详情
		orderDetails (id) {
		    this.$router.push({path: '/orderDetails', query: {id: id}})
		},
        // 返回上一级
        prev(){
        	this.$router.back()
        },
        handleSizeChange(val) {
          this.size = val;
          this.shopSelect()
        },
        handleCurrentChange(val) {
          this.page = val;
          this.shopSelect()
        },
        // 刷新
        refresh(){
          this.shopSelect()
        },
        // 修改弹框
        compile(row){
          this.dialogFormVisible = true
          this.form.title = row.title
          this.form.coverImg = row.coverImg
          this.form.goodsId = row.goodsId
          this.form.linkUrl = row.linkUrl
          this.form.content = row.content
          this.form.id = row.id
          this.form.status = row.status
          this.form.createTime = row.createTime
        },
        // 补货
        compileNoticeTo(){
          this.$http({
            url: this.$http.adornUrl2('/selfGoodsVirtual/update'),
            method: 'post',
            data: this.$http.adornData({
            'title':this.form.title,
            'content':this.form.content,
            'linkUrl':this.form.linkUrl,
            'goodsId':this.form.goodsId,
            'coverImg':this.form.coverImg,
            'id':this.form.id,
            'status':this.form.status,
            'createTime':this.form.createTime,
            })
          }).then(({data}) => {
            this.dialogFormVisible = false
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                 this.shopSelect()
                }
              })
          })
        },
        // 获取商品数据
        shopSelect () {
          let page = this.page-1
          let goodsId = this.$route.query.goodsId
          this.tableDataLoading = true
          this.$http({
           url: this.$http.adornUrl2('/selfGoodsVirtual/list'),
           method: 'get',
           params: this.$http.adornParams({
            'page':page,
            'size':this.size,
            'goodsId':goodsId,
           })
          }).then(({data}) => {
            this.tableDataLoading = false
            let returnData = data.data;
            this.tableData = returnData
          })
        },
      },
      mounted() {
        this.shopSelect()
      }
	  };
</script>

<style>

</style>
